<template>
  <div>
    <h2>统计分析-学生</h2>
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="课程：">
        <el-select v-model="searchForm.courseId" placeholder="请选择课程" @change="selectCourseChange">
          <el-option :label="item.name" :value="item.id" v-for="item in courseData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问卷：">
        <el-select v-model="searchForm.courseId" placeholder="请选择问卷" @change="selectCourseChange">
          <el-option :label="item.name" :value="item.id" v-for="item in courseData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getPaperList" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">课程：<el-tag type="success">{{ searchForm.courseName }}</el-tag>, 问卷：<el-tag type="success">{{ searchForm.paperTitle }}</el-tag></el-divider>
    <!--图表-->
    <div>
      <h2>图表区域</h2>
      <!--<div-->
      <!--    class="echart"-->
      <!--    id="mychart"-->
      <!--    :style="{ float: 'left', width: '100%', height: '400px' }"-->
      <!--&gt;</div>-->
      <!--<ve-line :data="chartData" :settings="chartSettings"></ve-line>-->
      <div>
        <!--<div style="margin: 20px">
          <el-radio-group v-model="radio" size="small">
            <el-radio-button label="1" border>今天</el-radio-button>
            <el-radio-button label="2" border>本月</el-radio-button>
            <el-radio-button label="3" border>本年</el-radio-button>
          </el-radio-group>
        </div>-->
        <ve-histogram :data="chartData"></ve-histogram>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: "Student",
  data () {
    return {
      searchForm: {
        courseName: '请选择课程',
        paperTitle: '请选择问卷'
      },
      courseData: [],
      /*chartData: {
        columns: ['横轴', 'PV', 'Order'],
        rows: [
          {'横轴': '2018-05-22', 'PV': 32371, 'Order': 19810},
          {'横轴': '2018-05-23', 'PV': 12328, 'Order': 4398},
          {'横轴': '2018-05-24', 'PV': 92381, 'Order': 52910}
        ]
      },*/
/*      chartSettings : {
        labelMap: {
          PV: '指标点1',
          Order: '指标点2'
        }
      },*/
      radio: 1,
      chartData: {
        columns: ['评价分值', '指标点1', '指标点2', '指标点3', '指标点4'],
        rows: [
          { '评价分值': '1/5', '指标点1': 1393, '指标点2': 1093, '指标点3': 0.32 , '指标点4': 0.32 },
          { '评价分值': '2/5', '指标点1': 3530, '指标点2': 3230, '指标点3': 0.26 , '指标点4': 0.26 },
          { '评价分值': '3/5', '指标点1': 2923, '指标点2': 2623, '指标点3': 0.76 , '指标点4': 0.76 },
          { '评价分值': '4/5', '指标点1': 1723, '指标点2': 1423, '指标点3': 0.49 , '指标点4': 0.49 },
          { '评价分值': '5/5', '指标点1': 3792, '指标点2': 3492, '指标点3': 0.323, '指标点4': 0.323 }
        ]
      }
    }
  }

}
</script>

<style scoped>

</style>